<!--
 * @FileDescription: 员工轨迹-第一版
 * @Author: luyaj
 * @Date: 2021-12-29 21:04:37
 * @LastEditors: luyaj 1579618152@qq.com
 * @LastEditTime: 2022-06-05 21:23:54
-->
<template>
  <a-card :border="false" class="track">
    <div class="left">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="staffList"
        :loading="loading"
        :pagination="false"
        class="j-table-force-nowrap">

        <span slot="realname" slot-scope="text, record">
          <a @click="handleShow(record.id)">{{text}}</a>
        </span>

      </a-table>
    </div>
    <!-- 地图 -->
    <div id="container"></div>
    <div class="input-card">
      <h4>轨迹回放控制</h4>
      <div class="input-item">
        <input type="button" class="btn" value="开始动画" id="start" @click="startAnimation" />
        <input type="button" class="btn" value="暂停动画" id="pause" @click="pauseAnimation" />
      </div>
      <div class="input-item">
        <input type="button" class="btn" value="继续动画" id="resume" @click="resumeAnimation" />
        <input type="button" class="btn" value="停止动画" id="stop" @click="stopAnimation" />
      </div>
    </div>
  </a-card>
</template>

<script>
  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { getAction } from '@/api/manage'

  export default {
    name: 'customerMap',
    mixins:[mixinDevice],
    data () {
      return {
        description: '客户分布地图管理页面',
        staffList: [],
        loading: false,
        lineArr: [],
        map: null,
        marker: null,
        polyline: null,
        passedPolyline: null,
        columns: [
          {
            title:'部门名称',
            align:"center",
            dataIndex: 'orgCode'
          },
          {
            title:'员工名称',
            align:"center",
            dataIndex: 'realname',
            scopedSlots: { customRender: 'realname' }
          }
        ],
        url: {
          list: "/sys/user/queryAll",
          queryLocationUrl: "/web/bizOrderSite/queryLocation"
        },
      }
    },
    methods: {
      loadMap() {
        this.map = new AMap.Map('container', {
          zoom: 12
        });
      },
      drawLine() {
        let _this = this
        AMap.plugin('AMap.MoveAnimation', function(){
          _this.marker = new AMap.Marker({
            map: _this.map,
            position: _this.lineArr[0],
            icon: "https://webapi.amap.com/images/car.png",
            offset: new AMap.Pixel(-26, -13),
            autoRotation: true,
            angle: -90,
          });

          _this.map.setFitView();

          // 绘制轨迹
          _this.polyline = new AMap.Polyline({
            map: _this.map,
            path: _this.lineArr,
            showDir: true,
            strokeColor: "#28F", // 线颜色
            strokeWeight: 6, // 线宽
          });

          _this.passedPolyline = new AMap.Polyline({
            map: _this.map,
            strokeColor: "#AF5", // 线颜色
            strokeWeight: 6, // 线宽
          });

          _this.marker.on('moving', function (e) {
            _this.passedPolyline.setPath(e.passedPath);
            _this.map.setCenter(e.target.getPosition(),true)
          });
        })
      },
      startAnimation () {
        this.marker.moveAlong(this.lineArr, {
          // 每一段的时长
          duration: 500,//可根据实际采集时间间隔设置
          // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
          autoRotation: true,
        });
      },
      pauseAnimation () {
        this.marker.pauseMove();
      },
      resumeAnimation () {
        this.marker.resumeMove();
      },
      stopAnimation () {
        this.marker.stopMove();
      },
      /** 员工 */
      querySatff() {
        this.loading = true
        getAction(this.url.list).then(res => {
          this.loading = false
          if (res.success) {
            this.staffList = res.result
          }
        })
      },
      handleShow(id) {
        if (this.marker) {
          this.map.remove(this.marker);
          this.map.remove(this.polyline);
          this.map.remove(this.passedPolyline);
        };;
        
        getAction(this.url.queryLocationUrl, { fitterId: id }).then(res => {
          if (res.success) {
            let arr = []
            if (res.result.length) {
              res.result.forEach(v => {
                arr.push(v.map(Number))
              })
              this.lineArr = arr
              this.drawLine()
            }
          }
        })
      }
    },
    mounted() {
      this.loadMap()
      this.querySatff()
    }
  }
</script>

<style lang="less" scoped>
  @import '~@assets/less/common.less';
  .track {
    /deep/ .ant-card-body {
      display: flex;
    }
    .left {
      width: 300px;
      margin-right: 10px;
    }
  }
  #container {
    height: calc(100vh - 59px - 52px - 75px);
    width: calc(100vw - 208px - 36px - 300px);
  }
  .input-card {
    left: calc(208px + 36px + 302px);
    bottom: 70px;
    .btn{
      margin-right: 1.2rem;
      width: 9rem;
    }
  } 
  .input-card .btn:last-child{
    margin-right: 0;
  }
  .j-table-force-nowrap /deep/ .ant-table-content {
    height: calc(100vh - 59px - 52px - 75px);
  }
</style>